<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box{
				width: 600px;
				height: 400px;
				background: red;
			}
			#cc{
				width: 400px;
				height:300px ;
				background: green;
			}
			#dd{
				width: 200px;
				height: 200px;
				background: blue;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
//				抓取元素
				var box = document.getElementById('box')
				var cc = document.getElementById('cc')
				var dd = document.getElementById('dd')
				
				box.onclick = function(){
					alert('红色')
				}
				cc.onclick = function(e){
//					获取事件对象
					var e = window.event||e;
					
//					判断浏览器是ie还是非ie
					if(document.all){
//						ie浏览器中阻止事件流
						e.cancelBubble=true;
					}else{
//						非ie浏览器中阻止事件流
						e.stopPropagation()
					}
					
					alert('绿色')
				}
				dd.onclick = function(){
					alert('蓝色')
				}
				
			}
			
		</script>
	</head>
	<body>
		<a href="javascript:;">2132321321</a>
		<div id="box">
			<div id="cc">
				<div id="dd">
					
				</div>
			</div>
		</div>
	</body>
</html>
